<template>
  <div class="setting-container">
    <div class="app-container">
      <el-card>
        <el-tabs v-model="activeName">
          <el-tab-pane label="角色管理" name="roles">
            <!-- 新增角色按钮 -->
            <el-button type="primary">+ 新增角色</el-button>
            <!-- 角色列表表格 -->
            <el-table v-loading="loading" :data="roleList" border stripe class="roleTable">
              <el-table-column label="序号" type="index" :index="indexMethod" width="80px" />
              <el-table-column label="角色名称" prop="name" width="130px" />
              <el-table-column label="描述" prop="description" />
              <el-table-column label="操作">
                <template>
                  <el-button type="success" size="small">分配权限</el-button>
                  <el-button type="primary" size="small">编辑</el-button>
                  <el-button type="danger" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页
            current-page:当前页码值
            page-sizes:可显示的pagenum数组
            page-szie:每页显示的条数
            layout:布局
            total:总条数

            size-change:每页显示条数值改变时触发
            current-change:页码值改变时触发
            -->
            <el-pagination
              :current-page="page"
              :page-sizes="[2, 3, 5, 10]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-tab-pane>
          <el-tab-pane label="公司信息" name="company">配置管理</el-tab-pane>
        </el-tabs>
      </el-card>

    </div>
  </div>
</template>

<script>
import { reqGetRoleList } from '@/api/settings'
export default {
  name: 'Setting',
  data() {
    return {
      activeName: 'roles',
      page: 1,
      pagesize: 3,

      roleList: [], // 角色列表
      total: 0,

      loading: false
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    async getRoleList() {
      this.loading = true
      const { data: { rows, total }} = await reqGetRoleList(this.page, this.pagesize)
      this.roleList = rows
      this.total = total
      this.loading = false
    },
    // 每页显示条数值改变时触发
    handleSizeChange(newSize) {
      this.pagesize = newSize
      this.getRoleList()
    },
    // 页码值改变时触发
    handleCurrentChange(newPage) {
      this.page = newPage
      this.getRoleList()
    },

    // 自定义索引值  index从0开始
    // 需求:让数据按照顺序排列
    // 算法: (page-1)*pagesize+index+1
    indexMethod(index) {
      return (this.page - 1) * this.pagesize + index + 1
    }
  }
}
</script>

<style lang="scss" scoped>
.roleTable {
  margin:15px 0;
}
</style>
